<template>
	<div class="role_dialog">
		<el-dialog :title="isEDit?'修改角色':'添加角色'" center :visible.sync="dialogFormVisible" :before-close="handleClose">
			<el-form :model="form" :rules="rules" ref="ruleForm">
				<el-form-item label="名称" prop="name">
					<el-input v-model.trim="form.name" autocomplete="off" placeholder="如:admin"></el-input>
				</el-form-item>
				<el-form-item label="显示名称" prop="display_name">
					<el-input v-model.trim="form.display_name" autocomplete="off" placeholder="如:管理员"></el-input>
				</el-form-item>
				<el-form-item label="角色拥有权限：">
					<!-- <el-checkbox-group v-model="form.permissions">
            <el-checkbox
              v-for="item in roleArr"
              :key="item.id"
              :label="item.id"
            >{{ item.display_name }}</el-checkbox>
          </el-checkbox-group> -->
				</el-form-item>
				<el-tree ref="tree" node-key="id" :default-checked-keys="checkData" :props="props" :data="roleArr" show-checkbox @check-change="handleCheckChange">
				</el-tree>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="handleClose">返回</el-button>
				<el-button type="primary" @click="submitForm('ruleForm')" v-no-more-click:3000>确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
	import {
		getPermissionList,
		addRole,
		getRoleInfo,
		editRole
	} from "~/api/user";
	export default {
		props: ['isEDit'],
		data() {
			return {
				checkData: [],
				dialogFormVisible: false,
				form: {
					permissions: []
				},
				roleArr: [],
				oldForm: {},
				rules: {
					name: [{
						required: true,
						message: "请输入名称",
						trigger: "blur"
					}],
					display_name: [{
						required: true,
						message: "请输入显示名称",
						trigger: "blur"
					}]
				},
				props: {
					children: 'children',
					label: 'display_name'
				}
			};
		},
		methods: {
			// 添加
			showDialog(id) {
				//权限
				this.getPermission();

				if (id) {
					//获取详情 原来的
					this.getInfo(id);
				} else {
					this.dialogFormVisible = true;
				}
			},

			// 获取权限列表
			getPermission() {
				getPermissionList(this.$axios, {
						paging: 2
					})
					.then(res => {
						if (res.data.code == 200) {
							let roleArr = res.data.data;
							roleArr[0].display_name = "全选";
							this.roleArr = roleArr;
						} else {
							this.$message({
								message: res.data.status
							});
						}
					})
			},

			// 提交数据
			submitForm(formName) {
				this.$refs[formName].validate(valid => {
					if (valid) {
						let apiFn = "";
						if (this.form.id) {
							// 修改
							apiFn = editRole;
							if (this.oldForm.name == this.form.name) {
								delete this.form.name;
							}
							if (this.oldForm.display_name == this.form.display_name) {
								delete this.form.display_name;
							}
						} else {
							// 添加
							apiFn = addRole;
						}
						apiFn(this.$axios, {
								id: this.form.id ? this.form.id : "",
								name: this.form.name,
								display_name: this.form.display_name,
								permissions: this.checkData
							})
							.then(res => {
								if (res.data.code == 200) {
									this.$message({
										message: "操作成功",
										type: "success"
									});
									this.resetForm("ruleForm");
									// 刷新
									this.$emit("changeList");
								} else {
									this.$message({
										message: res.data.message,
										type: "error"
									});
								}
							})
							.catch(err => {
								this.$message({
									message: err,
									type: "error"
								});
							});
					} else {
						this.$message({
							message: err,
							type: "success"
						});
						return false;
					}
				});
			},

			// 获取详情
			getInfo(id) {
				getRoleInfo(this.$axios, id)
					.then(res => {
						if (res.data.code == 200) {
							const roleData = res.data.data;
							this.oldForm.name = roleData.name;
							this.oldForm.display_name = roleData.display_name;
							let roleArr = [];
							this.checkData = [];
							for (let i in roleData.permissions) {
								roleArr.push(roleData.permissions[i].id);
								if(this.isEDit){
									this.checkData.push(roleData.permissions[i].id); //已选择的树
								}
							}
							this.form = roleData;
							this.form.permissions = roleArr;
							this.dialogFormVisible = true;
						} else {
							this.$message({
								message: res.data.status,
								type: "error"
							});
						}
					})
					.catch(err => {
						this.$message({
							message: err,
							type: "success"
						});
					});
			},
			// 弹出框关闭之前

			handleClose() {
				this.resetForm("ruleForm");
			},
			resetForm(formName) {
				this.dialogFormVisible = false;
				this.form = {
					permissions: []
				};
				this.$refs[formName].resetFields();
			},
			handleCheckChange(data, status) {
				let that = this;
				that.checkData = [];
				let res = this.$refs.tree.getCheckedNodes();
				let arr = []
				res.forEach((item) => {
					if(item.id<100){
						that.checkData.push(item.id)
					}
				})
			}
		}
	};
</script>
<style lang="less">
</style>
